<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>轮播插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.基本
		0)	准备工作：为最外层容器设定宽度。否则切换时可能出现白边
		1)	.carousel										//对最外层添加
		2)	.slide 											//对最外层添加
			3)	.carousel-inner 							//对所有img的容器添加
				4)	.item 									//对每一个img的直接父级添加(配合第一张首选active)
					4)	.carousel-caption 					//对图片的文字说明添加
			5)	.carousel-indicators 						//对ol添加，表示是一个轮播器
				6)	data-target="最外层容器" 				//对每一个li添加，绑定最外层容器的id名称
				7)	data-slide-to="0/1/2/3/4... "			//对每一个li添加，添加索引
			8)	href="最外层容器" 							//对两个a添加，绑定最外层容器的id名称。实现点击切换
			9)	data-slide="prev/next"						//对两个a添加，添加点击动作
			10)	.carousel-control 				//对两个a添加，让他们相对于容器左浮动，并且有一定的宽度，同时高度为容器的高度
				.left 										//点击图标的左浮动
				.right 										//点击图图标右浮动
			11)	data-ride="carousel" 						//对最外层容器添加。自动轮播，默认5秒一切换,循环播放
				data-ride可以用JS替代,写为：
					$('#myCarousel').carousel()

		*)	左右切换有两种方法，强烈推荐第二种方法,详情如下例。

	2.设置自定义属性(JS方法)
		1)	data-interval="毫秒" 						//切换的时间间隔
		2)	data-pause="hover" 							//鼠标移入暂停轮播。是默认的，所以可以不写
		3)	data-wrap="true"(默认) 					 	//true表示循环，false表示只播放一次

	3.方法JS
		1)	$('#myCarousel').carousel('cycle')		 			//开始循环各帧。与$('#myCarousel').carousel()似乎没有区别
		2)	$('#myCarousel').carousel('pause') 					//停止。不是暂停
		3)	$('#myCarousel').carousel(数字索引)					//指定跳转位置
		3)	$('#myCarousel').carousel('prev')					//上一张
		3)	$('#myCarousel').carousel('next')					//下一张

	4.事件
		1)	slide.bs.carousel 					//轮播前触发
			slid.bs.carousel 					//轮播后触发

	5.补充
		让左右切换 响应式 垂直居中
		1)	.carousel-control left 				//对a内的span添加
		2)	.carousel-control right 				//对a内的span添加

 -->
	<!-- <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 900px;"> --> <!-- 自动轮播 -->
	<div id="myCarousel" class="carousel slide" style="width: 900px;">
 		<ol class="carousel-indicators">
 			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 			<li data-target="#myCarousel" data-slide-to="1"></li>
 			<li data-target="#myCarousel" data-slide-to="2"></li>
 		</ol>
 		<div class="carousel-inner">
 			<div class="item active">
	 			<img src="img/slide1.png" alt="">
	 			<div class="carousel-caption">
	 				<h4>Bootstrap</h4>
	 				<p>Bootstrap是一款HTML5响应式框架</p>
	 			</div>
	 		</div>
	 		<div class="item">
	 			<img src="img/slide2.png" alt="">
	 			<div class="carousel-caption">
	 				<h4>JQuery</h4>
	 				<p>JQuery是一款JavaScript的开发库</p>
	 			</div>
	 		</div>
	 		<div class="item">
	 			<img src="img/slide3.png" alt="">
	 			<div class="carousel-caption">
	 				<h4>ExtJS</h4>
	 				<p>ExtJS是一款富客户端JS框架</p>
	 			</div>
	 		</div>
 		</div>
 		<!-- 第一种Tab方法: 需要转译符、font-size和lien-height控制居中 -->
 		<!-- <a href="#myCarousel" data-slide="prev" class="carousel-control left" style="font-size:100px;line-height:500px">&lsaquo;</a>
 		<a href="#myCarousel" data-slide="next" class="carousel-control right" style="font-size:100px;line-height:500px">&rsaquo;</a> -->
 		<!-- 如果是响应式的Tab，应该用JS去动态获取.carousel-inner中img的高度 -->

 		<!-- 【强烈推荐】第二种方法：自动居中,自适应 -->
 		<a href="#myCarousel" data-slide="prev" class="carousel-control left">
 			<span class="glyphicon glyphicon-chevron-left"></span>
 		</a>
 		<a href="#myCarousel" data-slide="next" class="carousel-control right">
			<span class="glyphicon glyphicon-chevron-right"></span>
 		</a>
 	</div>

 	<button id="btn1" class="btn btn-default">开始</button>
 	<button id="btn2" class="btn btn-default">停止</button>
 	<button id="btn3" class="btn btn-default">跳转到最后一张</button>
 	<button id="btn4" class="btn btn-default">上一张</button>
 	<button id="btn5" class="btn btn-default">下一张</button>

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>

		// 自定义属性
		$('#myCarousel').carousel({
			interval : 3000,
			// pause : 'hover',
			// wrap : false
		})

		//方法
		$('#btn1').click(function () {
			$('#myCarousel').carousel('cycle')
		})

		$('#btn2').click(function () {
			$('#myCarousel').carousel('pause')
		})

		$('#btn3').click(function () {
			$('#myCarousel').carousel( $('li').length-1 )
		})


		$('#btn4').click(function () {
			$('#myCarousel').carousel('prev')
		})


		$('#btn5').click(function () {
			$('#myCarousel').carousel('next')
		})

		/*$('#myCarousel').on('slid.bs.carousel', function () {
			alert('轮播后触发')
		})*/
		
	</script>
</body>
</html>